<template>
  <div class="account-wrap">
    <Avatar :src="avatarUrl"></Avatar>
    <div class="username">{{ state.nick }}</div>
    <div class="wx-num">微信号：{{ "xxxxxx" }}</div>
    <div class="btn-wrap">
      <el-button @click="updateNick" class="nick-btn" type="primary"
        >修改昵称</el-button
      >
      <div class="avatar-btn-wrap">
        <input
          class="upload"
          type="file"
          name="avatar"
          ref="ipt"
          @change="avatarChange"
        />
        <el-button class="avatar-btn" type="success">更换头像</el-button>
      </div>
      <el-button class="loginout" type="danger" @click="loginout"
        >退出登录</el-button
      >
    </div>
  </div>
</template>

<script>
import socket_m from "../../../../util/connect";
export default {
  data() {
    return {
      state: this.$store.state,
      avatarUrl: localStorage.getItem("avatarUrl"),
    };
  },
  methods: {
    updateNick() {
      this.$prompt("请输入昵称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          if (!value || value.trim() === "") {
            return this.$message.warning("请输入待修改的昵称");
          }
          if (value.trim() === localStorage.getItem("username")) {
            return this.$message.warning("新昵称和旧昵称相同");
          }
          socket_m.sendMsg("updateNick", { nick: value.trim() }, (o) => {
            console.log(o);
            this.$store.commit("updateNick_fn", o.nick);
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    loginout() {
      localStorage.setItem("token", "");
      socket_m.closeServer();
      this.$message.info("退出登录成功");
      this.$router.push("/login");
    },
    avatarChange(e) {
      let file = e.target.files[0];
      if (!file) return;
      let img_o = new Image();
      let url = window.URL || window.webkitURL;
      img_o.src = url.createObjectURL(file);
      let imgBase_s;
      let self = this;
      img_o.onload = function () {
        imgBase_s = self.getBase64Image(this);
        socket_m.sendMsg("avatar", { base64Img: imgBase_s }, (o) => {
          if (o.code === 0) {
            self.avatarUrl = o.avatarUrl;
            localStorage.setItem("avatarUrl", o.avatarUrl);
          }
        });
      };
    },
    getBase64Image(img) {
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, img.width, img.height);
      var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
      var dataURL = canvas.toDataURL("image/" + ext);
      return dataURL;
    },
  },
  components: {
    Avatar: () => import("../../../../components/coms/Avatar.vue"),
  },
  mounted() {
    console.log(this.avatarUrl);
  },
};
</script>
<style lang="less" scoped>
.account-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .username {
    margin-top: 20px;
  }
  .wx-num {
    margin-top: 10px;
  }
  .btn-wrap {
    display: flex;
    margin-top: 50px;
    .avatar-btn-wrap {
      margin-left: 30px;
      position: relative;
      .upload {
        width: 98px;
        height: 40px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
      }
      .avatar-btn {
      }
    }
    .loginout {
      margin-left: 30px;
    }
  }
}
</style>